<template>
  <div class="settings-section">
    <div class="section-title">{{ title }}</div>
    <div class="section-content" :class="{ 'common': title == '通用设置' }">
      <div class="settings-grid">
        <template v-for="(setting, index) in settings" :key="index">
          <div 
            class="setting-item" 
            v-if="(setting.show?.(node) ?? true) && !setting.isGrouped"
            :class="{ 'with-switch': setting.groupWith, 'full-width': isFullWidth(setting) }"
          >
            <div class="item-label" v-if="setting.label">{{ setting.label }}</div>
            <!-- 带开关的设置项 -->
            <div class="setting-conten" v-if="setting.groupWith">
              <div class="number-with-switch">
                <el-input-number 
                  v-model="node[setting.field]"
                  v-bind="setting.props"
                  :controls-position="'right'"
                  class="custom-number-input"
                />
                <el-switch
                  v-model="node[setting.groupWith]"
                  v-bind="getGroupedSetting(setting.groupWith).props"
                  class="custom-switch"
                />
              </div>
            </div>
            <!-- 普通设置项 -->
            <component 
              v-else
              :is="setting.component"
              v-model="node[setting.field]"
              v-bind="getComponentProps(setting)"
            >
              <template v-if="setting.component === 'el-select' && setting.props.options">
                <el-option
                  v-for="option in setting.props.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                  <div class="mock-option">
                    <div class="mock-label">{{ option.label }}</div>
                    <div class="mock-desc" v-if="option.desc">{{ option.desc }}</div>
                  </div>
                </el-option>
              </template>
              <template v-else-if="setting.label">
                {{ setting.label }}
              </template>
            </component>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  settings: {
    type: Array,
    required: true
  },
  node: {
    type: Object,
    required: true
  }
})

// 获取关联的设置项
const getGroupedSetting = (fieldName) => {
  return props.settings.find(s => s.field === fieldName)
}

// 处理组件属性
const getComponentProps = (setting) => {
  if (setting.component === 'el-select') {
    const { options, ...otherProps } = setting.props
    return otherProps
  }
  return setting.props
}

// 判断是否需要占满整行
const isFullWidth = (setting) => {
  return setting.component === 'el-input' && setting.props?.type === 'textarea'
}
</script>

<style lang="scss" scoped>
.settings-section {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 6px;
  background-color: var(--el-bg-color-page);
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid var(--el-border-color-light);
  padding-bottom: 8px;
}

.section-content {
  padding: 0 8px;
}

.settings-grid {
  /* display: grid; */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

.setting-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 20px;
  min-height: 32px;
}

.common {
  .setting-item {
    width: auto;
    margin-right: 20px;
    margin-bottom: 0;
  }
}

.setting-item.full-width {
  width: 100%;
  grid-column: 1 / -1;
}

.item-label {
  width: 80px;
  font-size: 13px;
  color: var(--el-text-color-regular);
  flex-shrink: 0;
}

.setting-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 输入框和数字输入框样式 */
:deep(.el-input),
:deep(.el-input-number),
:deep(.el-select) {
  width: 100%;
  flex: 1;
}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-input-number__wrapper) {
  padding: 1px 8px;
  height: 32px;
}

:deep(.el-select__wrapper) {
  height: 34px;
}

:deep(.el-input__inner) {
  height: 30px;
  font-size: 13px;
}

/* 数字输入框和开关的组合 */
.number-with-switch {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.number-with-switch :deep(.custom-number-input) {
  width: 200px;
}

.number-with-switch :deep(.custom-number-input .el-input__wrapper) {
  padding-right: 0;
}

.number-with-switch :deep(.custom-number-input .el-input-number__decrease),
.number-with-switch :deep(.custom-number-input .el-input-number__increase) {
  border: none;
  background-color: transparent;
  height: 15px;
  width: 24px;
  line-height: 15px;
  padding: 0;
}

.number-with-switch :deep(.custom-number-input .el-input-number__decrease) {
  bottom: 1px;
  top: auto;
}

.number-with-switch :deep(.custom-number-input .el-input-number__increase) {
  top: 1px;
}

.number-with-switch :deep(.custom-number-input .el-input__inner) {
  padding-right: 28px;
  text-align: left;
}

.number-with-switch :deep(.custom-switch) {
  margin-left: auto;
}

/* 开关样式优化 */
:deep(.el-switch) {
  --el-switch-size: 20px;
  --el-switch-on-color: var(--el-color-primary);
}

:deep(.el-switch__label) {
  font-size: 13px;
  height: 22px;
  line-height: 22px;
}

:deep(.el-switch__label--right) {
  margin-left: 8px;
}

/* 数字输入框样式优化 */
:deep(.el-input-number.is-controls-right .el-input__wrapper) {
  padding-left: 12px;
  padding-right: 28px;
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease),
:deep(.el-input-number.is-controls-right .el-input-number__increase) {
  background-color: transparent;
  border: none;
  color: var(--el-text-color-secondary);
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease:hover),
:deep(.el-input-number.is-controls-right .el-input-number__increase:hover) {
  color: var(--el-color-primary);
}

/* 暗黑模式适配 */
:deep(.el-input-number.is-controls-right[class*='-bg-color']) {
  background-color: var(--el-bg-color-overlay);
}

:deep(.el-input-number.is-controls-right .el-input__wrapper) {
  background-color: var(--el-bg-color-overlay);
}

/* Mock选项样式 */
:deep(.mock-option) {
  padding: 4px 0;
}

:deep(.mock-label) {
  font-size: 13px;
  color: var(--el-text-color-primary);
}

:deep(.mock-desc) {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 2px;
}

/* 文本域样式 */
:deep(.el-textarea) {
  width: 100%;
}

:deep(.el-textarea .el-input__wrapper) {
  padding: 4px 8px;
  height: auto;
}

/* 暗色主题适配 */
:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-textarea__wrapper) {
  background-color: var(--el-bg-color);
}
</style> 